<template>
    <view class="homeScreen">
        <img class="bg" src="../../static/img/bg.jpg" alt="">

        <view class="sudoku">
            <view class="title">数独</view>
            <view class="titlePy">sudoku</view>
        </view>

        <view class="wrap">
            <view>
                <img src="../../static/img/enter-4.png" alt="" @click="gotoGame(4)">
            </view>
            <view>
                <img src="../../static/img/enter-9.png" alt="" @click="gotoGame(9)">
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        onLoad() {
            let userInfo = {
                username: 'ttt',
                phone: 123456
            };
            this.$store.commit('setUserInfo', userInfo);
            console.log(this.$store.state.userInfo);
        },
        methods: {
            gotoGame(type) {
                uni.navigateTo({
                    url: '/pages/game/Game?type=' + type
                })
            }
        }
    }
</script>

<style lang="less">
    @import "../../static/style/common";

    .homeScreen {
        height: 100%;
        position: relative;

        .bg {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .sudoku {
            color: #ffffff;
            font-size: 60/7.5vw;
            font-weight: 600;
            text-align: center;
            text-shadow: 0 1px 0 #ccc, 0 2px 0 #cbcbcb, 0 3px 0 #bbb, 0 4px 0 #bababa, 0 5px 0 #aaa, 0 3px 5px rgba(0, 0, 0, 0.5);
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 50%;

            .title {
                letter-spacing: 24/7.5vw;
            }

            .titlePy {
                letter-spacing: 6/7.5vw;
            }
        }

        .wrap {
            display: flex;
            justify-content: space-around;
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 10vh;
            z-index: 9;

            img {
                .wh(131/7.5vw, 131/7.5vw);
            }
        }
    }
</style>
